<!--
 * @Author: your name
 * @Date: 2022-03-01 21:46:56
 * @LastEditTime: 2022-03-01 22:35:35
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /video-play/src/components/video/src/videoDemo.vue
-->
<template>
  <div>
    <!-- <div id="dplayer"></div> -->
    <d-player @play="play" :options="options" ref="player"></d-player>
  </div>
</template>
<script>
// import DPlayer from 'dplayer';
import VueDPlayer from 'vue-dplayer';
import 'vue-dplayer/dist/vue-dplayer.css';
export default {
  name: 'OceVideo',
  components: {
    'd-player': VueDPlayer,
  },
  created() {
    // this.player = this.$refs.player.dp;
  },
  mounted() {
    const player = this.$refs.player.dp;
    player.play();
    player.controls = false;
    setTimeout(() => {
      player.pause();
    }, 2000);
  },
  data() {
    return {
      player: null,
      options: {
        video: {
          url: 'http://static.smartisanos.cn/common/video/t1-ui.mp4',
        },
        control: false,
        autoplay: false,
        contextmenu: [
          {
            text: 'GitHub',
            link: 'https://github.com/MoePlayer/vue-dplayer',
          },
        ],
      },
    };
  },
  methods: {
    play() {
      console.log('play callback');
    },
    switchHandle() {
      this.player.switchVideo({
        url: 'http://static.smartisanos.cn/common/video/video-jgpro.mp4',
      });
    },
  },
};
</script>
